<template>
<div class="initiate">
  <h1>我的订单</h1>
    <el-table :header-row-style="{height:'30px'}"
              :row-style="{height:'80px'}"
              :data="tableData"
              :highlight-current-row='true'>

    <el-table-column
        prop="date"
        sortable
        label="日期"
        width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="title"
      label="订单标题"
      width="180">
  </el-table-column>
    <el-table-column
        label="帮助用户"
        width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>联系电话: {{ scope.row.phone }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
        prop="stateName"
        label="订单状态"
        width="180">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,30]"
        layout="sizes, prev, pager, next, total"
        :total="counts">
    </el-pagination>
  </div>
</div>
</template>

<script>
import {reqMyOrderItems} from "@/api";

export default {
  name: "MyInitiateOrder",
  data(){
    return {
      params: {pageNo: 1, pageSize: 10},
      tableData: [],
      counts: 0
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log('row===='+row.snapshotId)
      this.$router.push({name:'receive',query:{snapshotId: row.snapshotId,orderInitiateCode: row.orderInitiateCode}})
    },
    handleSizeChange(val) {
      this.params.pageSize = val
    },
    handleCurrentChange(val) {
      this.params.pageNo = val
    }
  },
  async mounted() {
    await reqMyOrderItems(this.params).then(( data ) => {
      this.tableData = data.items
      this.tableData.forEach((item)=>{
        switch (item.status) {
               case 0:
                    item['stateName'] = "未接单"
                   break;
               case 1:
                    item['stateName'] = "待确认"
                   break;
               case 2:
                    item['stateName'] = "进行中"
                   break;
               case 3:
                    item['stateName'] = "您取消了订单"
                   break;
               case 4:
                    item['stateName'] = "帮助用户取消了订单"
                   break;
               case 5:
                 console.log('ev'+item.evaluationStatus)
                    if (item.evaluationStatus == 1 || item.evaluationStatus == 3){
                      item['stateName'] = "已完成"
                    }
                    else {
                      item['stateName'] = '待评价'
                    }
                    break;
               case 6:
                    item['stateName'] = "帮助用户取消了订单"
                    break;
               case 7:
                    item['stateName'] = "求助用户取消了订单"
                    break;
               case 8:
                    item['stateName'] = "订单已过期"
                    break;
               default:
                    item['stateName'] = "状态错误，请联系管理员"
                   break;
           }
      })
      this.counts = data.counts
      console.log(data)
    });
  }

}
</script>

<style scoped>
.initiate{
  margin-top: 30px;
}
.el-table{
  margin-top: 20px;
  font-size: 14px;
  height: 750px;

}

.block{
  text-align: center;
}
</style>
